<template>
	<view id="service">
		<view class="service-icon el-icon-ali-service"></view>
		<view class="service-content">
			QQ客服号:{{qqNum}} <view class="copy-btn" @click="copy">复制</view>
		</view>
	</view>
</template>

<script>
	import {
		apiPushIndex
	} from '../../../http/apis.js';
	import { mapState } from 'vuex';
	export default{
		computed: {
			...mapState(['token'])
		},
		data(){
			return{
				qqNum: ''
			}
		},
		onShow() {
			apiPushIndex({
				token: this.token
			}).then(res =>{
			    if(res.data.code == 1)  {
					this.qqNum = this.homeData = res.data.msg.qq
				}         
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
		},
		methods:{
			copy(){
				uni.setClipboardData({
					data: this.qqNum,
					success: ()=> {
						this.$msg.showToast('复制成功')
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	#service {
		.service-icon {
			text-align: center;
			font-size: 300upx;
			color: $theme-color;
		}
		.service-content {
			font-size: 28upx;
			text-align: center;
		}
		.copy-btn {
			background: $theme-color;
			color: #FFFFFF;
			border-radius: 10upx;
			font-size: 28upx;
			display: inline-block;
			padding: 6upx 20upx;
			margin-left: 20upx;
			
		}
	}
</style>
